<template>
  <div class="members">
    <el-row>
      <el-col :span="24">
        <el-input
          class="w300px"
          v-model="search"
          placeholder="姓名/手机号/邮箱"
          clearable
          @keyup.enter.native="handleSearch">
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <span style="margin: 0 0 0 30px;">所属群组：</span>
        <el-select v-model="currentGroup" placeholder="请选择" @change="currentGroupChange">
          <el-option
            v-for="item in groups"
            :label="item.label"
            :value="item.value"
            :key="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <v-filter :multiGroups="false" @search="filterSearch"></v-filter>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="margin: 30px 0 10px;">
        <el-button plan>保存为动态群组</el-button>
        <el-button plan>保存为静态群组</el-button>
        <el-button type="danger" @click="removeMembers">从当前群组移除</el-button>
      </el-col>
      <el-col :span="24">
        <el-table
          stripe
          ref="multipleTable"
          :loading="tableLoading"
          :data="tableData"
          @selection-change="selectionChange"
          style="width: 100%">
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
          <el-table-column prop="tel" label="手机号" align="center"></el-table-column>
          <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
          <el-table-column prop="branchCompany" label="分公司" align="center"></el-table-column>
          <el-table-column prop="department" label="分部" align="center"></el-table-column>
          <el-table-column prop="job" label="职位" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" width="200" :formatter="getCreateTime"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            :current-page.sync="paging.page"
            :page-size.sync="paging.size"
            layout="sizes, total, prev, pager, next, jumper"
            :total.sync="paging.total"
            :page-sizes="[10, 30, 50, 100]"
            @current-change="pagingCurrentChange"
            @size-change="pagingSizeChange">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getGroupMemberList} from '@/service/getData'
  import VFilter from './filter'
  export default {
    components: {
      VFilter
    },
    data() {
      return {
        groups: [],
        currentGroup: '',
        search: '',
        tableData: [],
        tableLoading: false,
        paging: {
          page: 1,
          size: 10,
          total: 0
        },
        selectedRows: [],
      }
    },
    computed: {
      searchCondition() {
        return {
          search: this.search,
          groupType: this.groupType,
          page: this.paging.page,
          size: this.paging.size
        }
      }
    },
    created() {
      this.getGroupMembers()
    },
    methods: {

      filterSearch(value) {
        console.log(value)
      },

      // 获取群成员列表
      async getGroupMembers() {
        try {
          const res = await getGroupMemberList(this.searchCondition)
          const data = res.data.data || {}
          this.tableData = data.list || []
          this.paging.total = (data.page || {}).total || 0
        }catch (err) {

        }
      },

      // 所属群组改变
      currentGroupChange() {
        this.getGroupMembers()
      },

      // 选中行
      selectionChange(value) {
        this.selectedRows = value
      },

      // 删除群成员
      removeMembers() {
        const ids = this.selectedRows.map(item => item.id)
        if(!ids.length) {
          this.$message.warning('请选择需要移除的成员！')
          return false
        }
        const tips = ids.length > 1 ? '确定移除选中的所有成员？' : '确定移除该成员？'
        this.$confirm(tips, '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('移除成功！')
          this.$refs.multipleTable.clearSelection();
          this.getGroupMembers()
        }).catch(() => {

        })
      },

      // 搜索
      handleSearch(){
        this.paging.page = 1
        this.getGroupMembers()
      },

      // 分页当前页改变
      pagingCurrentChange(value) {
        this.paging.page = value
        this.getGroupMembers()
      },

      // 分页容量改变
      pagingSizeChange(value) {
        this.paging.page = 1
        this.paging.size = value
        this.getGroupMembers()
      },

      // 创建时间
      getCreateTime(row, column, cellValue, rowIndex) {
        return this.dateFormat(cellValue)
      },

      // 日期格式化
      dateFormat(date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },

    }
  }
</script>

<style lang="scss">

  .w300px {
    width: 300px;
  }

</style>
